<script setup lang="ts">
import { ref, watch, reactive } from "vue";
import { message } from "@/utils/message";
import { FormInstance } from "element-plus";
import { addPurchaseApply } from "@/api/purchaseManage/addPurchaseApply";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => {
      return {};
    }
  }
});
const ruleFormRef = ref<FormInstance>();

const formVisible = ref(false);
//初始化表单
const applyData = reactive({
  name: "",
  specification: "",
  brand: "",
  unit_price: "",
  quantity: "",
  purchase_reason: "",
  users_name: "",
  memo: ""
});
//提交响应
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(valid => {
    if (valid) {
      message("提交成功", { type: "success" });
      formVisible.value = false;
      resetForm(formEl);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
//关闭对话框
const closeDialog = () => {
  formVisible.value = false;
  resetForm(ruleFormRef.value);
};

const emit = defineEmits(["update:visible"]);
watch(
  () => formVisible.value,
  val => {
    emit("update:visible", val);
  }
);

watch(
  () => props.visible,
  val => {
    formVisible.value = val;
  }
);

// watch(
//   () => props.data,
//   val => {
//     formData.value = val;
//   }
// );

const rules = {
  name: [{ required: true, message: "请输入产品名称", trigger: "blur" }]
};
console.log(applyData);
</script>

<template>
  <el-dialog
    v-model="formVisible"
    title="新建采购申请"
    :width="680"
    draggable
    :append-to-body="true"
    :before-close="closeDialog"
  >
    <!-- 表单内容 -->
    <el-form
      ref="ruleFormRef"
      :model="applyData"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="名称">
        <el-input
          v-model="applyData.name"
          type="textarea"
          :style="{ width: '480px' }"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input
          v-model="applyData.specification"
          type="textarea"
          :style="{ width: '480px' }"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="品牌">
        <el-input
          v-model="applyData.brand"
          type="textarea"
          :style="{ width: '480px' }"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="单价">
        <el-input
          v-model="applyData.unit_price"
          type="textarea"
          :style="{ width: '480px' }"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="数量">
        <el-input
          v-model="applyData.quantity"
          type="textarea"
          :style="{ width: '480px' }"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="采购原因">
        <el-radio-group v-model="applyData.purchase_reason">
          <el-radio border label="更新" value="1" />
          <el-radio border label="新增" value="2" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="使用人">
        <el-input
          v-model="applyData.users_name"
          type="textarea"
          :style="{ width: '480px' }"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="applyData.memo"
          type="textarea"
          :style="{ width: '480px' }"
          placeholder="请输入内容"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button
        type="primary"
        @click="
          submitForm(ruleFormRef);
          addPurchaseApply(applyData);
        "
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>
